<style lang="less" scoped>
    #container {
        background: #fafafa;
        overflow: hidden;
        width: 100%;
        height: 100%;
    }

    .nav > li.active a {
        background-color: #85c030;
    }
</style>

<template>
    <div id="container">
        <!--        <remote-css href="https://magicbox.bk.tencent.com/static_api/v3/assets/bk-icon-2.0/iconfont.css"/>-->
        <remote-css href="https://magicbox.bk.tencent.com/static_api/v3/bk/css/bk.css"/>
        <remote-css href="https://magicbox.bk.tencent.com/static_api/v3/bk/css-pro/bk.css"/>
        <remote-css
                href="https://magicbox.bk.tencent.com/static_api/v3/assets/jstree-3.1.1/dist/themes/default/style.min.css"
        />

        <div
                id="horizontal_nav_demo10"
                class="nav king-horizontal-nav10"
        >
            <div class="navbar-header">
                <a
                        href="#"
                        class="navbar-brand"
                >
                    <img
                            src="https://magicbox.bk.tencent.com/static_api/v3/bk/images/logo.png"
                            class="logo"
                    >
                </a>
            </div>
            <ul class="nav navbar-nav">
                <li :class="{ active: isActive1 }" @click="active1">
                    <router-link to="/">进程查询</router-link>
                </li>
                <li
                        v-if="navbar1"
                        class="navslip"
                        style="width: 84px; left: 0px;"
                />
            </ul>
            <ul class="nav navbar-nav">
                <li :class="{ active: isActive2 }" @click="active2">
                    <router-link to="/about">关于</router-link>
                </li>
                <li
                        v-if="navbar2"
                        class="navslip"
                        style="width: 84px; left: 0px;"
                />
            </ul>
            <div class="navbar-header pull-right">
                <ul class="nav">
                    <li class="user-info">
                        <a
                                href=""
                                style="float: right"
                        >{{username}}</a>
                    </li>
                </ul>
            </div>
        </div>
        <router-view/>
    </div>
</template>

<script>

    export default {
        components: {
            'remote-css': {
                render(createElement) {
                    return createElement('link', {attrs: {rel: 'stylesheet', href: this.href}})
                },
                props: {
                    href: {type: String, required: true}
                }
            }
            // 'remote-js': {
            //   render (createElement) {
            //     return createElement('script', { attrs: { type: 'text/javascript', src: this.src } })
            //   },
            //   props: {
            //     src: { type: String, required: true }
            //   }
            // }
        },
        data() {
            return {
                navbar1: true,
                navbar2: false,
                isActive1: true,
                isActive2: false,
                username: ''
            }
        },
        mounted() {
            this.get_user()
            this.get_all_scripts()
        },
        methods: {
            get_user() {
                this.$http.get('/api/get_user').then((res) => {
                    this.username = res.data.user_name
                })
            },
            get_all_scripts() {
                this.$http.get('/api/get_all_scripts').then()
            },
            active1() {
                this.isActive1 = true
                this.navbar1 = true
                this.isActive2 = false
                this.navbar2 = false
            },
            active2() {
                this.isActive2 = true
                this.navbar2 = true
                this.isActive1 = false
                this.navbar1 = false
            }
        }
    }
</script>
